{include file="$header" /}
<div class="mk-page" style="padding-bottom: 60px;">
    <div class="mk-layout">
        <div class="mk-page-header">
            <div class="title">{:lang('search')}</div>
            <div class="desc">{:lang('Site-wide search, can search accurately according to category')}</div>
        </div>
        <el-form ref="search" :model="search" label-width="80px">
            <el-form-item prop="keyword" label="{:lang('Key words')}" :rules="[{ required: true, message: lang('Keyword cannot be empty')}]">
                <el-input v-model="search.keyword"></el-input>
            </el-form-item>
            <el-form-item prop="modular" label="{:lang('Categories')}">
                <el-select v-model="search.modular">
                    <el-option label="{:lang('Full Site')}" value=""></el-option>
                    <el-option v-for="(item, index) in modularList" :label="item.title" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchClick()">{:lang('search')}</el-button>
            </el-form-item>
        </el-form>
        <div class="mk-search" v-loading="loading">
            <el-empty v-if="list.length == 0" description="{:lang('Search content does not exist!')}"></el-empty>
            <template v-else>
                <el-row :gutter="20" v-for="(item, index) in list" :index="index">
                    <el-col sm="24">
                        <el-card>
                            <div class="item">
                                <el-image :src="item.cover"></el-image>
                                <div class="content">
                                    <div v-html="item.title"></div>
                                    <div v-html="item.seo_description"></div>
                                    <div>
                                        <time>{{item.create_time}}</time>
                                        <a :href="item.url"><el-button type="text" class="button">{:lang('learn more')}</el-button></a>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </template>
        </div>
        <el-pagination
            @current-change="pageChange"
            :current-page="search.page"
            :total="pageTotal"
            layout="total, prev, pager, next, jumper"
            background
            hide-on-single-page>
        </el-pagination>
    </div>
</div>
{include file="$component" /}
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                pageTotal: Number("{$count}"),
                search :{
                    keyword: "{$keyword}",
                    page: "{$page}",
                    modular: "{$modular}",
                },
                modularList: {:json_encode($modularList)},
                list: {:json_encode($list)},
            }
        },
        computed: {
            url() {
                return index_url('search/' + this.search.keyword) + '?page=' + this.search.page + '&modular=' + this.search.modular;
            },
        },
        methods: {
            getData() {
                let self = this;
                self.$refs['search'].validate((valid) => {
                    if (valid) {
                        location.href = self.url
                    } else {
                        return false;
                    }
                })
            },
            searchClick() {
                this.search = Object.assign({}, this.search, {page: 1});
                this.getData();
            },
            pageChange(value) {
                this.search = Object.assign({}, this.search, {page: value});
                this.getData();
            },
        }
    });
</script>
{include file="$footer" /}